<template>
  <div>
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      v-show="scene === 1"
    >
      <el-row :gutter="20">
        <el-col :span="1" :offset="0">
          <el-button type="primary" size="default" @click="addteacherlist" :disabled="isoktockick"
            >添加</el-button
          >
        </el-col>
        <el-col :span="1" :offset="0">
          <el-button
            type="primary"
            size="default"
            @click="byidgetlistdata(backid)"
            >查询</el-button
          >
        </el-col>
        <el-col :span="8" :offset="0">
          <el-input
            v-model="backid"
            placeholder="查询用户编号.."
            size="normal"
            clearable
            @change="changeinput"
          ></el-input>
        </el-col>
      </el-row>
    </el-card>
    <el-table :data="listdata" border stripe v-show="scene === 1" >
      <el-table-column type="index" prop="col.id" label="序号" :width="80">
      </el-table-column>
      <el-table-column prop="col.id" label="反馈编号" width="80">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.backid }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="功能异常类型" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.bug }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="联系方式" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.tel }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="描述" width="width">
        <template slot-scope="{ row, $index }">
          <div class="truncate">
            {{ row.description }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="col.id" label="照片" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            <img :src="baseurl+row.imgurl1" style="width: 120px; height: 120px" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            <el-button
              v-show="! (row.isbackmeg ==='0')"
              type="success"
              size="mini"
              icon="el-icon-finished"
              circle
              :disabled="! (row.isbackmeg ==='0')"
              @click="downdatashop(row)"
            ></el-button>
            <el-button
              v-show=" (row.isbackmeg === '0')"
              type="danger"
              size="mini"
              icon="el-icon-refresh-left"
              circle
              @click="updatashop(row)"
            ></el-button>

            <el-button
              type="warning"
              size="mini"
              circle
              icon="el-icon-edit"
              @click="showshopdetail(row)"
            ></el-button>
            <el-button
              type="info"
              size="mini"
              circle
              icon="el-icon-info"
              @click="maintenance(row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              circle
              icon="el-icon-delete"
              @click="deletebut(row)"
            >
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      style="font-size: 30px; color: #000"
      title="用户反馈详情:"
      :visible.sync="drawer"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="5">反馈编号</el-col>
        <el-col :span="16" >
          {{ showparentdata.backid }}</el-col
        >
      </el-row>

      <el-row>
        <el-col :span="5">功能类型</el-col>
        <el-col :span="16" style="color: #ff0a0a">
          {{ showparentdata.bug }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">描述</el-col>
        <el-col :span="16" style="color: #ff0a0a">
          {{ showparentdata.description }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">联系方式</el-col>
        <el-col :span="16" >
          {{ showparentdata.tel }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">平台回复</el-col>
        <el-col :span="16" v-if="showparentdata.backcontent ===''? 0:1" style="color: #1a9c34;">
          {{ showparentdata.backcontent }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="5">图片数</el-col>
        <el-col :span="16" 
          >{{ showparentdata.img }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">图片</el-col>
        <el-col :span="16">
          <div class="block">
            <el-carousel height="250px" >
              <el-carousel-item v-for="(item,index) in photolist" :key="index">
                <img :src="baseurl+item" alt="" height="250px">
                
              </el-carousel-item>
            </el-carousel>
          </div>
         
        </el-col>
      </el-row>
    </el-drawer>
    <div v-show="scene === 2">
      <!-- @spusendscene="spusendscene" -->
      <spuindex ref="spu" @gobackscene="gobackscene" :backid = "tempbackid"> </spuindex>
    </div>
  </div>
</template>

<script>
import spuindex from "@/views/feedback/feedbackall/spuform/index.vue";
export default {
  name: "",
  data() {
    return {
      baseurl:"https://zyc618.mynatapp.cc",
        isoktockick:false,
      listdata_r: [],
      listdata: [],
      listselect: "",
      isSale: true,
      drawer: false, //抽屉展示与隐藏
      direction: "rtl",
      backid: "",
      showcontent: "",
      showparentdata: {},
      scene: 1,
      rules: {
        backid: {
          rule: /^[0-9]+$/,
          msg: "输入异常..",
        },
      },
      photolist:[],
      tempbackid:0
    };
  },
  components: {
    spuindex,
  },
  methods: {
    //正则校验
    validate(key) {
      let bool = true;
      if (!this.rules[key].rule.test(this[key])) {
        this.$message({
          message: this.rules[key].msg,
          type: "warning",
        });
        bool = false;
        return bool;
      }
      return bool;
    },
    gobackscene(){
        this.scene =1;
        this.getlistdata()
    },
    async updatashop(row) {
        this.scene =2;
        this.tempbackid = row.feeddetailid;
    },
    //下架数据的回调
    async downdatashop(row) {
        this.scene =2;
        this.tempbackid = row.feeddetailid;

    },
    //展开详细详情:
    // -照片显示
    clockphotolist(url){
        this.photolist=[]
       this.photolist.push(url.imgurl1);
       this.photolist.push(url.imgurl2);
       this.photolist.push(url.imgurl3);
       this.photolist.push(url.imgurl4);
       this.photolist= this.photolist.filter(str => str.trim() !== "")
    },
    async showshopdetail(row) {
      
      let result = await this.$API.feedbackall.byidgetfeedbackall(
        row.backid || row
      );
      if (result.code === 200&& result.data) {
        this.drawer = true;
        this.showparentdata = result.data;
        this.clockphotolist(this.showparentdata)

      }else if(! result.data){
        this.drawer = false;
        this.$message({
          message:"错误查询,请输入正确的编号",
          type:"error"
        })
      }
      else{
        this.drawer = true;
        this.showparentdata = row;
        this.clockphotolist(this.showparentdata)
      }
    },
    //开发维护
    maintenance(row) {
      this.$message("测试中...");
    },
    //删除按钮的回调
    deletebut(row) {
      this.$message({
        type:"error",
        message:"权限不够禁止删除"
      });
    },
    //获取用户所有数据
    async getlistdata() {
      let result = await this.$API.feedbackall.getfeedback();
      if (result.code === 200) {
        
        this.listdata = result.data;
      }
    },
    //根据id号查询数据:
    async byidgetlistdata(backid) {
      if (!this.validate("backid")) {
        this.getlistdata();
        return;
      } else {
        this.showshopdetail(backid);
      }
    },
    //发起修改保存回调
    savecontent() {
      this.$message("开发维护中...");
    },
    //确认关闭？
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changeinput(value) {},
    addteacherlist() {
        this.$message({
            type:"error",
            message:"权限不够禁止添加"
        })
        this.isoktockick = true
      // this.$refs.spu.initSpuData(row);
    },
  },
  mounted() {
    this.getlistdata();
  },
  computed: {},
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.truncate {
  font-size: 18px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 200px; /* 设置宽度 */
}
.el-row .el-col-5 {
  font-size: 18px;
  text-align: right;
}
.el-col {
  margin: 10px 10px;
  font-size: 14px;
  align-content: center;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
